<template>
  <div>
    <el-table :data="tableData" :border="true" row-key="id" default-expand-all>
      <el-table-column prop="name" label="名称" />
      <el-table-column
        align="center"
        prop="code"
        label="权限值"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="updateTime"
        label="修改时间"
        show-overflow-tooltip
      />

      <el-table-column align="center" label="操作" width="300">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="User"
            :disabled="row.level === 4"
            @click="addPromisston(row)"
          >
            {{ row.level === 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            :disabled="row.level === 1"
            @click="updatePromisston(row)"
          >
            编辑
          </el-button>

          <el-popconfirm
            :title="`确定要删除${row.name}`"
            width="260px"
            @confirm="deletePromisston(row)"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                :disabled="row.level === 1"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      :title="menuData.id ? '更新菜单' : '添加菜单'"
      width="30%"
    >
      <el-form :model="menuData"  ref="formRef">
        <el-form-item label="名称" prop="roleName">
          <el-input v-model="menuData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限值" prop="roleName">
          <el-input v-model="menuData.code" autocomplete="off" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  reqAllMenuList,
  reqAddOrUpdateMenu,
  reqRemoveMenu
} from '@/api/acl/menu/index'
import type {
  Permission,
  PermissionList,
  PermissionResponseData,
  MenuParams
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
import { ref, onMounted, reactive } from 'vue'
const tableData = ref<PermissionList>([])

const getHasPermission = async () => {
  const result: PermissionResponseData = await reqAllMenuList()
  tableData.value = result.data
}

onMounted(() => {
  getHasPermission()
})

const dialogVisible = ref<boolean>(false)
const menuData = reactive<MenuParams>({
  name: '',
  code: '',
  level: 0,
  pid: 0
})
const addPromisston = async (row: Permission) => {
  Object.assign(menuData, {
    name: '',
    code: '',
    level: 0,
    pid: 0
  })
  delete menuData.id
  dialogVisible.value = true
  menuData.level = row.level + 1
  menuData.pid = row.id
}
const updatePromisston = (row: Permission) => {
  dialogVisible.value = true
  Object.assign(menuData, row)
}
const save = async () => {
  await reqAddOrUpdateMenu(menuData)
  dialogVisible.value = false
  ElMessage({
    type: 'success',
    message: menuData.id ? '更新成功' : '添加成功'
  })

  getHasPermission()
}
const deletePromisston = async (row: Permission) => {
  await reqRemoveMenu(row.id as number)
  ElMessage({
    type: 'success',
    message: '删除成功'
  })

  getHasPermission()
}
</script>

<style scoped>
.form {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
